import React, { useState, useEffect } from "react";
import "../css/zyh_hydj.css"
import { NavBar, Space, Toast, Button, Modal, Divider, Input, ProgressBar } from 'antd-mobile'
import { useNavigate } from "react-router-dom"
const Zyh_hydj = () => {
    const router = useNavigate()
    const back = () => {
        router("/layouts/user")
    }
    const [percent, setPercent] = useState(50)
    const gotodjsm=()=>{
        router("/zyh/djsm")
    }
    const [jingy,setjingy] = useState(10000)
    const [xfjl,setxfjl] = useState([
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        },
        {
            time: "2022-12-12 12:12:12",
            price: 1000
        }
    ])
    return (
        <div className="zth_hydj">
            <NavBar onBack={back} style={{ color: "white" }}>会员等级</NavBar>
            <div className="zth_hydj_main">
                <div className="zth_hydj_main_head">
                    <div className="zth_hydj_main_left">
                        <div className="zth_hydj_biao">v8</div>
                        <div>当前等级</div>
                        <div style={{ color: "#ffaf00" }}>v8</div>
                    </div>
                    <div className="zth_hydj_main_right" onClick={()=>gotodjsm()}>
                        等级说明
                    </div>
                </div>
                <div className="zth_hydj_main_button">
                    <ProgressBar percent={jingy/20000*100} className="zth_hydj_main_button_progress" style={{
                        '--fill-color':
                            'linear-gradient(to right, var(--adm-color-primary), var(--adm-color-success))',
                    }} />
                    <div style={{display: "flex", justifyContent: "space-between",lineHeight:"50px"}}>
                        <span style={{color: "#ffaf00"}}>{jingy}经验值</span>
                        <span style={{color:"#656565"}}>20000经验值</span>
                    </div>
                </div>
            </div>
            <div className="zth_hydj_foot">
                <h2>获取记录</h2>
                {
                    xfjl.map((item, index) => {
                        return (
                            <div>
                                <span>{item.time}</span>
                                <span>+{item.price}</span>
                            </div>
                        )
                    })
                }
                <p style={{textAlign: "center", color: "#ffaf00"}}>只显示最近10条记录</p>
            </div>
        </div>
    )
}

export default Zyh_hydj